<template>
  <div class="app-container">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="原密码" prop="oldPassword" class="is-required" maxlength="16">
        <el-input v-model="form.oldPassword" type="password" clearable autocomplete="off" placeholder="请输入" class="w250" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" class="is-required" maxlength="16">
        <el-input v-model="form.newPassword" type="password" clearable autocomplete="off" placeholder="请输入" class="w250" @input="validateAll(1)" />
      </el-form-item>
      <el-form-item label="重复新密码" prop="rePassword" class="is-required" maxlength="16">
        <el-input v-model="form.rePassword" type="password" clearable autocomplete="off" placeholder="请输入" class="w250" @input="validateAll(2)" />
      </el-form-item>
      <el-form-item label="密码强度">
        <el-tag size="mini" :type="passwordStronger >= 1 ? pws[passwordStronger] : 'info'" effect="dark" class="mr10 ml10" v-html="htm" />
        <el-tag size="mini" :type="passwordStronger >= 2 ? pws[passwordStronger] : 'info'" effect="dark" class="mt5 mr10 ml10" v-html="htm" />
        <el-tag size="mini" :type="passwordStronger >= 3 ? pws[passwordStronger] : 'info'" effect="dark" class="mt5 mr10 ml10" v-html="htm" />
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" type="primary" plain :loading="loading" @click="savePassword">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>

import { validator } from '@/utils/form'
import { getPubKey, getSettingMap } from '@/api/sys'
import { changePassword } from '@/api/user'
export default {
  name: 'Password',
  components: { },
  data() {
    return {
      htm: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
      sm: {},
      pws: { 1: 'danger', 2: 'warning', 3: 'success', 0: 'info' },
      strongerMap: { 1: '弱', 2: '中', 3: '强' },
      loading: false,
      pubKey: null,
      form: {
        oldPassword: '', newPassword: '', rePassword: null
      },
      // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
      iconClasses: ['iconfont icon-weixuanze1']
    }
  },
  computed: {
    passwordStronger() {
      return this.getPasswordStronger()
    },
    rules() {
      return {
        newPassword: [
          { validator: validator(this.checkNew), message: '请输入新密码', trigger: ['blur', 'change'] }
        ],
        rePassword: [
          { validator: validator(this.checkRe), message: '请重复新密码', trigger: ['blur', 'change'] }
        ],
        oldPassword: [
          { validator: validator('notBlank'), message: '请输入原密码', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    this.initSetting()
    getPubKey().then((r) => {
      // console.log(r)
      this.pubKey = r
    })
  },
  methods: {
    getPasswordStronger() {
      const v = this.form.newPassword
      if (this.$util.isBlank(v)) {
        return 0
      }
      if (v.trim().length < this.sm.minLength) {
        return 1
      }
      let n = 0
      if (/.*[0-9].*/.test(v)) {
        n++
      }
      if (/.*[a-zA-z].*/.test(v)) {
        n++
      }
      if (/.*[~!@#$%^&*()_+|<>,.?/:;'\[\]{}"]+.*/.test(v)) {
        n++
      }
      return n
    },
    validateAll(b) {
      if (b === 1) {
        if (this.$util.isNotBlank(this.form.rePassword)) {
          this.$refs.editForm.validateField(['rePassword'])
        }
      }
      if (b === 2) {
        if (this.$util.isNotBlank(this.form.newPassword)) {
          this.$refs.editForm.validateField(['newPassword'])
        }
      }
    },
    checkNew() {
      if (this.$util.isBlank(this.form.newPassword)) {
        return '请输入新密码'
      }
      if (this.form.newPassword === this.form.oldPassword) {
        return '原密码和新密码不能相同'
      }
      if (this.form.newPassword.trim().length < this.sm.minLength) {
        return '密码长度至少为' + this.sm.minLength + '位'
      }
      if (this.getPasswordStronger() < this.sm.passwordStronger) {
        return '密码强度至少为' + this.strongerMap[this.sm.passwordStronger]
      }
      return true
    },
    checkRe() {
      if (this.$util.isBlank(this.form.rePassword)) {
        return '请重复新密码'
      }
      if (this.form.newPassword !== this.form.rePassword) {
        return '两次输入的密码不一致'
      }
      return true
    },
    initSetting() {
      this.loading = true
      getSettingMap('password-policy').then((r) => {
        this.loading = false
        const d = r
        this.sm.minLength = parseInt(d.minLength)
        this.sm.passwordStronger = parseInt(d.passwordStronger)
        console.log(this.sm)
      })
    },
    savePassword() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          const par = this.$util.copy(this.form)
          par.oldPassword = this.$util.rsa(this.pubKey, par.oldPassword)
          par.newPassword = this.$util.rsa(this.pubKey, par.newPassword)
          changePassword(par).then((r) => {
            this.$message.success('修改成功')
            this.loading = false
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
